{% extends 'base.html' %}


{% block content %}
<html>
<head>
	<meta charset="UTF-8">
	<title>eFilms Panel Administración</title>
	<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
	<link href="static/LogOnThings/css/AdminLTE.css" rel="stylesheet" type="text/css" />
	<link type="text/css" rel="stylesheet" href="LogOnThings/css/DragDrop.css">
	<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css" media="all" rel="stylesheet">
	<link href="static/loginThings/css/styles.css" media="all" rel="stylesheet">

        <script>


		window.onload = function(){
                document.getElementById("capaRegistroUsuario").style.display = "inline";
        		document.getElementById("capaUltimosUsuariosRegistrados").style.display = "inline";
        	}

        	function limpiarCamposRegistroUsuario(){

        		document.getElementById("email").value="";

        	}



       	function ocultarCapas(){

        		document.getElementById("capaRegistroUsuario").style.display = "none";
        		document.getElementById("capaUltimosUsuariosRegistrados").style.display = "none";
        		document.getElementById("capaRealizarIngreso").style.display = "none";
        		document.getElementById("capaSubirXML").style.display = "none";
        		document.getElementById("capaGestionarPeliculas").style.display = "none";
        		document.getElementById("capaUltimosXMLSubidos").style.display = "none";
        		document.getElementById("capaUltimosIngresosRealizados").style.display = "none";
        		document.getElementById("capaUltimosGestionesRealizadas").style.display = "none";
        	};



        	function ocultarCapasAlRegistroUsuario(){
        		ocultarCapas();
        		document.getElementById("capaRegistroUsuario").style.display = "inline";
        		document.getElementById("capaUltimosUsuariosRegistrados").style.display = "inline";

        	};

        	function ocultarCapasAlSubirXML(){
        		ocultarCapas();
        		document.getElementById("capaSubirXML").style.display = "inline";
        		document.getElementById("capaUltimosXMLSubidos").style.display = "inline";


        	};
        	function ocultarCapasAlRealizarIngreso(){
        		ocultarCapas();
        		document.getElementById("capaRealizarIngreso").style.display = "inline";
        		document.getElementById("capaUltimosIngresosRealizados").style.display = "inline";

        	};

        	function ocultarCapasAlGestionarPeliculas(){
        		ocultarCapas();
        		document.getElementById("capaGestionarPeliculas").style.display = "inline";
        		document.getElementById("capaUltimosGestionesRealizadas").style.display = "inline";


        	};







        </script>

    </head>
    <body class="skin-blue">
    	<!-- header logo: style can be found in header.less -->
    	<header class="header">
    		<a href="index.html" class="logo">
    			<!-- Add the class icon to your logo image or logo icon to add the margining -->
    			D11 Films
    		</a>
    		<!-- Header Navbar: style can be found in header.less -->
    		<nav class="navbar navbar-static-top" role="navigation">
    			<!-- Sidebar toggle button-->

    			<div class="navbar-right">

    			</div>
    		</nav>
    	</header>
    	<div class="wrapper row-offcanvas row-offcanvas-left">
    		<!-- Left side column. contains the logo and sidebar -->
    		<aside class="left-side sidebar-offcanvas">
    			<!-- sidebar: style can be found in sidebar.less -->
    			<section class="sidebar">
    				<!-- Sidebar user panel -->
    				<div class="user-panel">
    					<div class="pull-left image">
    						<img src="LogOnThings/img/avatar3.png" class="img-circle" alt="User Image" />
    					</div>
    					<div class="pull-left info">




							<p>Hola, {{ user.username }}</p>




							<a href="#"><i class="fa fa-circle text-success"></i> Logeado</a>
    					</div>
    				</div>
    				<!-- search form -->

    				<!-- /.search form -->
    				<!-- sidebar menu: : style can be found in sidebar.less -->
    				<ul class="sidebar-menu">
    					<li onclick="ocultarCapasAlRegistroUsuario()" class="active">
    						<a>
    							<i class="fa fa-dashboard"></i> <span>Registrar Usuario</span>
    						</a>
    					</li>
    					<li onclick="ocultarCapasAlSubirXML()">
    						<a>
    							<i class="fa fa-th"></i> <span>Subir xml</span> <small class="badge pull-right bg-green">new</small>
    						</a>
    					</li>
    					<li onclick="ocultarCapasAlRealizarIngreso()" class="treeview">
    						<a>
    							<i class="fa fa-bar-chart-o"></i>
    							<span>Realizar Ingreso</span>
    							<i class="fa fa-angle-left pull-right"></i>
    						</a>

    					</li>
    					<li onclick="ocultarCapasAlGestionarPeliculas()" class="treeview">
    						<a>
    							<i class="fa fa-laptop"></i>
    							<span>Gestionar Peliculas</span>
    							<i class="fa fa-angle-left pull-right"></i>
    						</a>

    					</li>


    				</ul>
    			</section>
    			<!-- /.sidebar -->
    		</aside>

    		<aside class="right-side">
    			<!-- Content Header (Page header) -->
    			<section class="content-header">
    				<h1>
    					Panel de administración
    				</h1>

    			</section>

    			<section class="content">

    				<div class="row">
    					<section class="col-lg-7 connectedSortable">

    						<div id="capaRegistroUsuario">
    							<div class="box box-solid bg-light-blue-gradient">
    								<div class="box-header">
    									<div class="pull-right box-tools">
    									</div>
    									<i class=""></i>
    									<h3 class="box-title">
    										Registro de usuarios
    									</h3>
    								</div>
    								<div class="box-body">
    									<div id="" style="height: auto;">
    										<form class="form animate-form" id="form" onsubmit="return false;">
    											<div class="form-group has-feedback">
    												<label class="control-label sr-only" for="email">Correo Electrónico</label>
    												<div class="input-group-addon">
    													<div class="glyphicon glyphicon-envelope"></div>
    												</div>
    												<input class="form-control" id="email" name="email" placeholder="Correo Electrónico" type="text"><span class="glyphicon glyphicon-ok form-control-feedback"></span>
    											</div>
    											<div class="form-group submit">
    												<input class="btn btn-lg" type="submit" value="ENVIAR" >
    											</div>
    										</form>
    									</div>
    								</div>
    							</div>
    						</div>

    						<div id="capaSubirXML">
    							<div class="box box-solid bg-light-blue-gradient">
    								<div class="box-header">
    									<i class="fa fa-th"></i>
    									<h3 class="box-title">Subir XML</h3>
    									<div class="box-tools pull-right">

    									</div>
    								</div>
    								<div class="box-body border-radius-none">
    									<div class="chart" id="line-chart" style="height:auto;">

    										<div id="subirXML" style="visibility: visible;">

    											<div id="byte_content"></div>
    											<div id="byte_range"></div>
    											<div id="uploads"></div>
    											<div class="dropzone" id="dropzone">Arrastra hasta aquí el fichero .xml</div>

    											<div id="seleccionArchivoXml">


                                                         <div class="">
                                                            <input id="files" type="file" class="filestyle" name="files[]" data-buttonname="btn-primary" id="filestyle-3" tabindex="-1" style="position: absolute; clip: rect(0px 0px 0px 0px);">
                                                                <div class="bootstrap-filestyle input-group"></div>

                                                        </div>


    												<output id="list"></output>

    												<script>
    													function handleFileSelect(evt) {

    														var file = evt.target.files[0];
    														loadXMLDoc(file);

    													}

    													document.getElementById('files').addEventListener('change', handleFileSelect, false);
    												</script>

    											</div>


    											<script type="text/javascript">

    												function loadXMLDoc(file){

    													var start = 0;
    													var stop = file.size-1;
    													var reader = new FileReader();
    													var text;
    													reader.onloadend = function(evt){
    														if(evt.target.readyState == FileReader.DONE){

    															['Read bytes: ', start + 1, ' - ', stop + 1,
    															' of ', file.size, ' byte file'].join('');
    															text = reader.result;
    															console.log(text);
                                                                window.alert("El fichero se ha subido correctamente");
    														}
    													};

    													var blob = file.slice(start, stop+1);
    													reader.readAsBinaryString(blob);

    												}

    												(function(){
    													var dropzone = document.getElementById('dropzone');

                    //cuando tenemos la informacion del archivo en ondrop lo manejamos en esta funcion
                    var upload = function(files){

                    	if(files[0].type == "text/xml"){
                    		console.log("Es un xml");
                    		var xmlDoc = loadXMLDoc(files[0]);


                    	}else{
                    		window.alert("El fichero no es de formato .xml");
                    		consele.log("Es un fichero no valido");
                    	}


                    }

                    //que pasa al soltar un archivo en la zona drag&drop
                    dropzone.ondrop = function(e){
                        e.preventDefault();//Esto lo hace que no se ejecute ninguna accion al soltar el archivo, si es una imagen x defecto se muestra
                        this.className = 'dropzone'; //cambiamos el css al dejar el archivo, asi queda como al inicio
                        console.log(e.dataTransfer.files);//con esto mostramos por consola la informacion del fichero subido para poder manejarlo
                        upload(e.dataTransfer.files);
                    };


                    //aqui lo que hacemos es que al arrastrar el fichero dentro de la zona cambiamos el css para que salgan las líneas negras oscuras
                    dropzone.ondragover = function(){
                    	this.className = 'dropzone dragover';
                    	return false;
                    };

                    //aquí cuando dejamos un de tener el fichero en la dona de drag&drop cambiamos los css otra vez
                    dropzone.ondragleave = function(){
                    	this.className = 'dropzone';
                    	return false;
                    };

                }());

</script>



</div>


</div>
</div>
</div>
</div>




<div id="capaRealizarIngreso">
	<div class="box box-solid bg-light-blue-gradient">
		<div class="box-header">
			<i class="fa fa-th"></i>
			<h3 class="box-title">Realizar ingreso</h3>

		</div>
		<div class="box-body border-radius-none">
			<div class="chart" id="line-chart" style="height: auto;">

				<form class="form animate-form" id="form" onsubmit="return false;">
					<div class="form-group has-feedback">
						<label class="control-label sr-only" for="email">Correo Electrónico</label>
						<div class="input-group-addon">
							<div class="glyphicon glyphicon-euro"></div>
						</div>
						<input class="form-control" id="ingreso" name="ingreso" placeholder="Realiza un ingreso" type="number"><span class="glyphicon glyphicon-ok form-control-feedback"></span>
					</div>
					<div class="form-group submit">
						<input class="btn btn-lg" type="submit" value="Realizar ingreso" >
					</div>
				</form>

			</div>
		</div>

	</div>
</div>

<div>



</div>

<div id="capaGestionarPeliculas">

	<div class="box box-solid bg-light-blue-gradient">
		<div class="box-header">
			<i class="fa fa-th"></i>
			<h3 class="box-title">GestionarPeliculas</h3>

		</div>
		<div class="box-body border-radius-none">
			<div class="chart" id="line-chart" style="height: auto;"></div>
		</div>
	</div>
</div>

</section><!-- /.Left col -->
<!-- right col (We are only adding the ID to make the widgets sortable)-->
<section class="col-lg-5 connectedSortable">

	<div id="capaUltimosUsuariosRegistrados">
		<div class="box box-solid bg-teal-gradient">
			<div class="box-header">
				<i class="fa fa-th"></i>
				<h3 class="box-title">Últimos usuarios registrados</h3>

			</div>
			<div class="box-body border-radius-none">
				<div class="chart" id="line-chart" style="height: auto;"></div>
			</div><!-- /.box-body --></div>
		</div>


		<div id="capaUltimosXMLSubidos">
		<div class="box box-solid bg-teal-gradient">
			<div class="box-header">
				<i class="fa fa-th"></i>
				<h3 class="box-title">Últimos xml subidos</h3>

			</div>
			<div class="box-body border-radius-none">
				<div class="chart" id="line-chart" style="height: auto;"></div>
			</div><!-- /.box-body --></div>
		</div>

		<div id="capaUltimosIngresosRealizados">
		<div class="box box-solid bg-teal-gradient">
			<div class="box-header">
				<i class="fa fa-th"></i>
				<h3 class="box-title">Últimos ingresos realizados</h3>

			</div>
			<div class="box-body border-radius-none">
				<div class="chart" id="line-chart" style="height: auto;"></div>
			</div><!-- /.box-body --></div>
		</div>

		<div id="capaUltimosGestionesRealizadas">
		<div class="box box-solid bg-teal-gradient">
			<div class="box-header">
				<i class="fa fa-th"></i>
				<h3 class="box-title">Últimas gestiones realizadas</h3>

			</div>
			<div class="box-body border-radius-none">
				<div class="chart" id="line-chart" style="height: auto;"></div>
			</div><!-- /.box-body --></div>
		</div>



	</section><!-- right col -->
</div><!-- /.row (main row) -->

</section><!-- /.content -->
</aside><!-- /.right-side -->
</div><!-- ./wrapper -->

        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="static/loginThings/js/jquery.validation.js"></script>
        <script src="static/loginThings/js/messages_es.js"></script>
        <script src="static/loginThings/js/main.js"></script>


    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>-->
<!--script src="LoginThings/js/bootstrap.min.js"></script>-->
    <script type="text/javascript" src="static/LoginThings/js/bootstrap-filestyle.min.js" charset="utf-8"></script>

    </body>
    </html>


{% endblock %}






<!--{% block content %}

    <table>
        <tr>
            <td>{{ user.username.label_tag }}</td>
            <td>{{ user.username }}</td>
        </tr>

        <tr>
            <td>{{ user.email.label_tag }}</td>
            <td>{{ user.email }}</td>
        </tr>

        <tr>
            <td>{{ user.first_name.label_tag }}</td>
            <td>{{ user.first_name }}</td>
        </tr>

        <tr>
            <td>{{ user.last_name.label_tag }}</td>
            <td>{{ user.last_name }}</td>
        </tr>

        <tr>
            <td>{{ user.date_joined.label_tag }}</td>
            <td>{{ user.date_joined }}</td>
        </tr>

        <tr>
            <td>{{ user.last_login.label_tag }}</td>
            <td>{{ user.last_login }}</td>
        </tr>

    </table>

    <a href="{% url 'logout' %}">Logout</a>


{% endblock %}-->

